<template>
  <!-- 轮播 -->
  <view class="slide-box">
    <swiper
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
      circular="true"
      classs="sliders"
      style="height: 100vw;"
      @change="swiperChange"
    >
      <swiper-item class="slider-item" v-for="(item, index) in img_urls" :key="index">
        <image
          mode="aspectFit"
          @tap="previewImage(item, img_urls)"
          :src="item"
          class="slide-image"
          width="355"
          height="150"
        />
      </swiper-item>
    </swiper>
    <!-- 翻页样式 -->
    <view v-if="img_urls.length" class="dots-box flex-center">
      <block v-for="(item, index) in dot_list" :key="index">
        <view class="dot" :class="{ active: current_swiper === index }"></view>
      </block>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      img_urls: {
        type: Array,
        default: () => [],
      },
      detail: {
        type: Object,
        default: () => {},
      },
      video_url: {
        type: String,
        default: '',
      },
      dot_list: {
        type: Number,
        default: 0,
      },
    },
    watch: {},
    onShow() {},
    data() {
      return {
        current_swiper: 0, // 轮播图小点
        autoplay: false,
        interval: 4000,
        duration: 1000,
        video_index: '',
        video_id: '',
        video_show: true,
        videoplay: '',
      }
    },
    mounted() {},
    methods: {
      // 轮播图点的样式切换
      swiperChange(e) {
        const { current } = e.detail
        this.current_swiper = current
        if (current != this.video_index) {
          let videoplay = uni.createVideoContext('video_1')
          videoplay.pause()
          this.video_show = true
        }
      },
      toPlayVideo() {
        this.video_show = false
        let videoplay = uni.createVideoContext('video_1')
        videoplay.play()
      },
      videoPlay() {
        this.controls = true
        this.video_index = 0
      },
      bindpause() {
        this.video_index = 0
        this.video_show = true
      },
    },
  }
</script>

<style lang="scss" scoped>
  // 轮播
  .slide-box {
    position: relative;
    width: 100%;
    height: 100vw;
    background: #fff;

    .slider-item {
      width: 100%;
      height: 100%;

      video {
        width: 100%;
        height: 100%;
      }
    }

    .slide-image,
    .swiper-video {
      display: block;
      width: 100%;
      height: 100%;
    }

    .video-view {
      width: 100%;
      height: 100vw;
      background-color: #000;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;

      .play-box {
        width: 88rpx;
        height: 88rpx;
        background: rgba(0, 0, 0, 0.8);
        border-radius: 50%;
      }

      .play {
        width: 48rpx;
        height: 48rpx;
      }
    }

    .dots-box {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 32rpx;

      // 未选中时的小圆点样式
      .dot {
        width: 10rpx;
        height: 10rpx;
        margin-right: 10rpx;
        background: #e1e1e1;
        border-radius: 5rpx;
      }

      // 选中以后的小圆点样式
      .active {
        width: 24rpx;
        height: 10rpx;
        background: #333;
        border-radius: 5rpx;
      }
    }
  }
</style>
